<template>
    <div class="profile-container">
      <div class="profile-header">
        <div class="avatar">
          <img src="https://picsum.photos/100/100" alt="用户头像">
          <button @click="changeAvatar">更换头像</button>
        </div>
        <div class="user-info">
          <h2>{{ username }}</h2>
          <p>{{ email }}</p>
          <div class="joined-date">注册日期: {{ formatDate(joinedDate) }}</div>
        </div>
      </div>
      
      <div class="profile-tabs">
        <button :class="{ active: currentTab === 'basic' }" @click="currentTab = 'basic'">基本信息</button>
        <button :class="{ active: currentTab === 'security' }" @click="currentTab = 'security'">安全设置</button>
        <button :class="{ active: currentTab === 'preferences' }" @click="currentTab = 'preferences'">偏好设置</button>
      </div>
      
      <div class="tab-content">
        <div v-if="currentTab === 'basic'" class="tab-pane">
          <h3>基本信息</h3>
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="username" disabled>
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input type="email" v-model="email">
          </div>
          <div class="form-group">
            <label>昵称</label>
            <input type="text" v-model="nickname">
          </div>
          <div class="form-group">
            <label>简介</label>
            <textarea v-model="bio"></textarea>
          </div>
          <button @click="saveBasicInfo">保存修改</button>
        </div>
        
        <div v-if="currentTab === 'security'" class="tab-pane">
          <h3>安全设置</h3>
          <div class="form-group">
            <label>当前密码</label>
            <input type="password" v-model="currentPassword">
          </div>
          <div class="form-group">
            <label>新密码</label>
            <input type="password" v-model="newPassword">
          </div>
          <div class="form-group">
            <label>确认新密码</label>
            <input type="password" v-model="confirmPassword">
          </div>
          <button @click="changePassword">修改密码</button>
        </div>
        
        <div v-if="currentTab === 'preferences'" class="tab-pane">
          <h3>偏好设置</h3>
          <div class="form-group">
            <label>主题</label>
            <select v-model="theme">
              <option value="light">浅色主题</option>
              <option value="dark">深色主题</option>
              <option value="auto">自动跟随系统</option>
            </select>
          </div>
          <div class="form-group">
            <label>通知</label>
            <div class="checkbox-group">
              <input type="checkbox" id="email-notify" v-model="emailNotify">
              <label for="email-notify">邮件通知</label>
            </div>
            <div class="checkbox-group">
              <input type="checkbox" id="push-notify" v-model="pushNotify">
              <label for="push-notify">推送通知</label>
            </div>
          </div>
          <button @click="savePreferences">保存设置</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: localStorage.getItem('username') || '用户',
        email: 'user@example.com',
        nickname: '编程爱好者',
        bio: '欢迎来到我的个人中心',
        joinedDate: '2023-01-01',
        currentTab: 'basic',
        currentPassword: '',
        newPassword: '',
        confirmPassword: '',
        theme: 'light',
        emailNotify: true,
        pushNotify: true
      }
    },
    methods: {
      formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
      },
      changeAvatar() {
        alert('更换头像功能');
      },
      async saveBasicInfo() {
        try {
          // 模拟保存基本信息请求
          await this.$axios.post('/api/update-profile', {
            email: this.email,
            nickname: this.nickname,
            bio: this.bio
          });
          
          alert('基本信息已保存');
        } catch (error) {
          console.error('保存失败:', error);
          alert('保存失败，请重试');
        }
      },
      async changePassword() {
        if (!this.currentPassword || !this.newPassword || !this.confirmPassword) {
          alert('请填写所有密码字段');
          return;
        }
        
        if (this.newPassword !== this.confirmPassword) {
          alert('两次输入的新密码不一致');
          return;
        }
        
        try {
          // 模拟修改密码请求
          await this.$axios.post('/api/change-password', {
            currentPassword: this.currentPassword,
            newPassword: this.newPassword
          });
          
          alert('密码修改成功');
          this.currentPassword = '';
          this.newPassword = '';
          this.confirmPassword = '';
        } catch (error) {
          console.error('修改密码失败:', error);
          alert('修改密码失败，请检查当前密码是否正确');
        }
      },
      async savePreferences() {
        try {
          // 模拟保存偏好设置请求
          await this.$axios.post('/api/save-preferences', {
            theme: this.theme,
            emailNotify: this.emailNotify,
            pushNotify: this.pushNotify
          });
          
          alert('偏好设置已保存');
        } catch (error) {
          console.error('保存失败:', error);
          alert('保存失败，请重试');
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .profile-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
  }
  
  .avatar {
    position: relative;
  }
  
  .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  
  .avatar button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .avatar:hover button {
    opacity: 1;
  }
  
  .user-info {
    text-align: left;
  }
  
  .user-info h2 {
    margin: 0;
    margin-bottom: 5px;
  }
  
  .user-info p {
    color: #8c8c8c;
    margin: 0;
    margin-bottom: 10px;
  }
  
  .joined-date {
    color: #bfbfbf;
    font-size: 14px;
  }
  
  .profile-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .profile-tabs button {
    padding: 10px 20px;
    background-color: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .profile-tabs button.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
  }
  
  .tab-content {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
  }
  
  .tab-pane {
    text-align: left;
  }
  
  .tab-pane h3 {
    margin-top: 0;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .form-group textarea {
    height: 100px;
  }
  
  .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .checkbox-group input {
    margin-right: 5px;
    width: auto;
  }
  
  .tab-pane button {
    padding: 10px 20px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>
      